<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter } from 'vue-router';
import { Message } from '@arco-design/web-vue';
import { login } from "../../api/Login/login.ts"

const router = useRouter();
const form = reactive({
  userName: 'admin',
  password: '123456',
  isRead: false,
})
const loginForm = ref(null);

const userSettings = reactive({
  doYouRememberThePassword: true,
})
const clickLogin = () => {

const { userName: username, password } = form;
  router.push({
    path: "/home/workbench"
  })
}
const checkRememberPassword = value => {
  console.log(value)
}
</script>

<template>
  <div class="login">
    <div class="lgin_from_box">
      <a-typography :style="{ marginTop: '-40px' }">
        <a-typography-title>
          登陆
        </a-typography-title>
        <a-typography-paragraph>
          副标题副标题副标题副标题
        </a-typography-paragraph>
      </a-typography>
      <a-form ref="loginForm" layout="horizontal" :model="form" class="login-form" auto-label-width>
        <a-form-item field="用户名" label="用户名">
          <a-input v-model="form.userName" placeholder="请输入用户名..." allow-clear />
        </a-form-item>
        <a-form-item field="密码" label="密码">
          <a-input-password v-model="form.password" placeholder="请输入密码..." allow-clear></a-input-password>
        </a-form-item>
        <a-space :size="16" direction="vertical">
          <div class="login-form-password-actions">
            <a-checkbox v-model="userSettings.doYouRememberThePassword" @change="checkRememberPassword">
              记住密码
            </a-checkbox>
            <a-link>忘记密码</a-link>
          </div>
          <a-button type="primary" html-type="submit" long @click="clickLogin">
            登陆
          </a-button>
          <!--          <a-button type="text" long class="login-form-register-btn">-->
          <!--            注册-->
          <!--          </a-button>-->
        </a-space>
      </a-form>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-form {
    width: 500px;
    margin-top: 40px;
  }

}

.login-form-password-actions {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>